<template>
  <div class="wrapper">
    <arrow />
    <view class="search">
      <u-search
          placeholder="请输入关键字"
          v-model="keyword"
          height="60rpx"
          searchIconSize="50rpx"
          @search="getList"
          @custom="getList"
          @change="getList"
          @blur="getList"
      ></u-search>
    </view>
    <view class="list">
      <v-list :list="list" />
      <!--<search-list :list="list" />-->
    </view>
  </div>
</template>

<script>
import Arrow from '../../components/arrow'
import List from '../../components/list'
import SearchList from '../../components/list/search-list'
import base64 from '../../util/base64'
import Home from '../../api/home'
const homeModel = new Home()

export default {
  components: {
    Arrow,
    'v-list': List,
    SearchList,
  },
  data() {
    return {
      keyword: '',
      list: []
    }
  },
  onLoad(options) {
    this.keyword = options.keyword || ''
  },
  methods: {
    getList() {
      if (this.keyword) {
        homeModel.search({ keyword: this.keyword }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.list = data
          console.log(this.keyword, this.list)
        })
      }
    },
  },
  watch: {
    keyword: {
      handler(v) {
        if (!v || v.length === 0) {
          this.list = []
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20rpx;
  background: $background_color;
  min-height: 100vh;
  .search {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
  }
  .list {
    margin: 20rpx 0;
  }
}
</style>
